<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <!-- 这一条用于移动端更好的预览设置，进行缩放比例 -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>归档</title>
  <!-- Bootstrap css文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Semmanticui css文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  <!-- 引入自定义css样式 -->
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body class="qt-bj buryit">




<!-- 导航标签 这个Semmantic-Ui框架有一些导航，写上对应类标签就可以啦-->
<!-- inverted加上这个导航背景就变成黑色（颜色翻转的意思）
     attached没有圆角
     m-padded-tb-mini自己写的css样式类选择器
     secondary里面的每个容器都包裹文字
     stackable当屏幕缩小的时候，导航变成下拉式,堆叠在一块-->
<nav th:replace="_fragments :: menu(4)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
  <div class="ui container"><!-- container是一个一个容器来放 -->
    <div class="ui inverted secondary stackable menu">


      <!-- 导航左边 -->
      <h2 class="ui teal header item">TGF-BK</h2>
      <a href="#" class="m-item item m-mobile-hide"><i class="mini home icon"></i>&nbsp;&nbsp;首页</a><!-- icom都是图标，官方文档里面有 -->
      <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>&nbsp;&nbsp;分类</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>&nbsp;&nbsp;标签</a>
      <a href="#" class="active m-item item m-mobile-hide"><i class="mini clone icon"></i>&nbsp;&nbsp;归档</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>&nbsp;&nbsp;关于我</a>

      <!-- 搜索栏 -->
      <!-- right item把div容器放到最后边 -->
      <div class="right m-item item m-mobile-hide">
        <!-- input 自动为表单的形式,
        icon这个div 容器就可以放图标了
        transparent 透明的意思 -->
        <div class="ui icon inverted transparent input">
          <input type="text" placeholder="Search...."><!-- placeholder默认显示的数据 -->
          <i class="search link icon"></i><!-- 搜索图标,link鼠标指到变成手型 -->
        </div>
      </div>


    </div>
  </div>


  <!-- 加上面包导航，移动端点击面包导航才显示出来,m-right-top自定义样式显示到右边,m-mobile-show移动端才显示这个图标 -->
  <!-- menu toggle这个只是为了让jquery获取这个图标的，当点击这个图标，就把m-mobile-hide样式变为显示 -->
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><!-- icon button图标按钮 -->
    <i class="sidebar icon"></i><!-- 面包样式 -->
  </a>
</nav>









<!--中间内容,左右布局
    m-padded-tb-large控制上下内边距-->
<!--中间内容-->
<!--中间内容-->
<div  class="m-opacity-map m-container-small m-padded-tb-big" style="height: 800px!important;">
  <div class="ui container">
    <!--header-->
    <div class="ui top attached padded segment">
      <div class="ui middle aligned two column grid">
        <div class="column">
          <h3 class="ui teal header">归档</h3>
        </div>
        <div class="right aligned column">
          共 <h2 class="ui orange header m-inline-block m-text-thin" th:text="${blogCount}"> 114 </h2> 篇博客
        </div>
      </div>
    </div>


    <!-- 标题 -->
    <!-- 这里是map集合，通过年份分层，年份就是key，对应的内容就是value -->
    <th:block th:each="item : ${archivesMap}">
      <h3 class="ui center aligned header" th:text="${item.key}">2017</h3>
      <div class="ui fluid vertical menu">
        <a href="#"  target="_blank" class="item" th:each="blog : ${item.value}" th:href="@{/blog/{id}(id=${blog.id})}">
          <span>
            <i class="mini teal circle icon"></i><span th:text="${blog.title}" >关于刻意练习的清单</span>
            <div class="ui teal basic left pointing label m-padded-mini " th:text="${#dates.format(blog.updateTime,'MMMdd')}">9月03</div>
          </span>
          <div class="ui orange basic left pointing label m-padded-mini " th:text="${blog.flag}">原创</div>
        </a>
      </div>
    </th:block>


  </div>
</div>

<br>
<br>











<!-- 底部 -->
<!-- m-padded-tb-mini自定义样式标签设置间隔 -->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive m-mobile-hide">
  <div class="ui center aligned container"><!-- container容器,center aligned所有容器居中 -->


    <!-- grid就是一个一个格子 , 相当于bootstrap的栅格系统 , grid是分成16份-->
    <!-- 这里前面1格占1分，3格都占3份，后面一格占6份 -->
    <div class="ui inverted divided stackable grid"><!-- divided这个对grid栅格系统加上分隔线 -->
      <!-- 占几份直接用英文的数字 -->


      <!-- 第一个格子 -->
      <div class="four wide column"><!-- four4份 -->
        <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
          <div class="item"><!-- item居中对齐 -->
            <!-- 图片，rounded图片是圆角,ewm-dx自定义图片大小 -->
            <img src="http://i2.tiimg.com/724771/142be0e76be9c182.jpg" class="ui rounded image ewm-dx" alt="" >
          </div>
        </div>
      </div>


      <!-- 第二个格子 -->
      <div class="three wide column"><!-- three3份 -->
        <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4><!-- 标题 -->
        <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
          <a href="#" class="item">用户故事</a>
          <a href="#" class="item">用户故事</a>
          <a href="#" class="item">用户故事</a>
        </div>
      </div>


      <!-- 第三个格子 -->
      <div class="three wide column"><!-- three3份 -->
        <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4><!-- 标题 -->
        <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
          <a href="#" class="item">Email: 2247605840@qq.com</a>
          <a href="#" class="item">QQ: 2247605840</a>
          <a href="#" class="item">微信: xinyikuoai</a>
        </div>
      </div>


      <!-- 第四个格子 -->
      <div class="six wide column"><!-- seven7份 -->
        <h4 class="ui inverted header m-text-thin m-text-spaced">温暖一刻!</h4><!-- 标题 -->
        <p class="m-text-thin m-text-spaced m-opacity-mini">真正属于你的💖，不应该是伤人的冰块，应该是一杯温暖人的热茶!</p>
      </div>
    </div>


    <!-- 最底下的,divider分割线,section跟上面的div的间隔s -->
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-mini">属于你的终究是我</p>



  </div><!-- 最外面的容器container -->
</footer>














<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<!-- 因为Semmantic-UI框架要依赖jquery包 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!-- Bootstrap js文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--/*/</th:block>/*/-->

<script>
  //当点击面包导航按钮，就显示导航列表
  //menu.toggle选中面包导航按钮，当点击的时候m-item这个类标签(导航列表)，有没有m-mobile-hide这个样式，没有就加上，有就减去
  $('.menu.toggle').click(function () {
    $('.m-item').toggleClass('m-mobile-hide');//toggleClass这个的作用就是当点击这个按钮，如果有这个样式就减去，如果没有就加上
  });
</script>
</body>
</html>